<template>
	<view class="mainPage content" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="box">
			<view class="title">
				<view class="switch">电话问诊开关</view>
				<view class="text">{{status==true?'已开启':'已关闭'}}</view>
			</view>
			<view class="but">
				<u-switch v-model="checked" @change="change" active-color="#FE7600FF" inactive-color="#eee"></u-switch>
			</view>
		</view>
		<view class="box1" @click="etid">
			<view class="left">电话问诊价格</view>
			<view class="right">
				<text>￥100.00</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="box1" @click="etid">
			<view class="left">电话时长</view>
			<view class="right">
				<text>15分钟</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="box2">
			<view class="title1">说明</view>
			<view class="title2">1、通过电话在线向患者询问</view>
			<view class="title2">2、电话时长有且只有一个</view>
			<view class="title2">3、时长仅能设置整数，且不低于15分钟</view>
		</view>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "电话问诊",
			cost: '',
			checked: true,
			chengshiNum: 100,
			status: true,
		};
	},
	onLoad() {
		that = this
	},
	methods: {
		// switch打开或者关闭时触发，值为true或者false
		// 即使不监听此事件，this.checked此时也会相应的变成true或者false
		change(status) {
			that.status = status
			console.log(status);
		},
		dianji(index, label) {
			this.chengshiNum = index
			that.labels = label
			console.log(index)
			console.log(label)
		},
		determine() {
		},
		etid() {
			uni.navigateBack()
		}
	}
};
</script>
<style scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	background: #f6f6f6;
	position: relative;
	.flex-container {
		// display: -webkit-flex;
		// display: flex;
		// -webkit-justify-content: flex-end;
		// justify-content: space-around;
		width: 100%;
		background-color: #ffffff;
		padding: 30rpx;
		margin-top: 14rpx;
		.title {
			padding: 20rpx;
			font-size: 28rpx;
			height: 60rpx;
			.title1 {
				display: inline-block;
				width: 80%;
				float: left;
				line-height: 60rpx;
			}
			.title2 {
				display: inline-block;
				width: 20%;
				float: right;
				text-align: center;
				padding: 6rpx 10rpx;
				background: #8a8a8a;
				background: linear-gradient(223deg, #ff9331 0%, #fe7600 100%);
				border-radius: 4rpx;
				color: #ffffff;
			}
		}
		.flex-item {
			width: 30%;
			margin: 30rpx 10rpx;
			color: #adadad;
			display: inline-block;
			border: 1rpx #d1d1d1 solid;
			padding: 20rpx 30rpx;
			border-radius: 60rpx;
			text-align: center;
			clear: both;
		}
		.active {
			background-color: #fe7600ff;
			color: #ffffff;
		}
	}
	.box {
		background: #ffffff;
		height: 150rpx;
		.title {
			display: inline-block;
			float: left;
			padding: 30rpx 50rpx;
			.switch {
				padding: 0 10rpx;
			}
			.text {
				padding: 10rpx;
				color: #8a8a8a;
			}
		}
		.but {
			display: inline-block;
			float: right;
			padding: 50rpx;
		}
	}
	.box1 {
		padding: 30rpx;
		background: #ffffff;
		margin-top: 15rpx;
		.left {
			display: inline-block;
			width: 70%;
		}
		.right {
			display: inline-block;
			width: 30%;
			text-align: right;
		}
		text {
			color: red;
			margin-right: 20rpx;
		}
	}
	.box2 {
		position: absolute;
		bottom: 0;
		height: 400rpx;
		background: #ffffff;
		width: 100%;
		.title1 {
			padding: 10rpx 50rpx 10rpx 50rpx;
		}
		.title2 {
			padding: 15rpx 50rpx;
		}
	}
}
</style>
